<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧养老平台 - 登录注册</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="css/longing.css">
</head>

<body>
  <div id="auth-app">
    <!-- 登录注册容器 -->
    <div class="auth-container">
      <!-- 左侧宣传区域 -->
      <div class="auth-hero">
        <h2>智慧养老服务平台</h2>
        <p>为老年人提供全面的健康监测、安全防护、生活服务和情感关怀，打造"安心、舒心、开心"的养老生活</p>
        <i class="fas fa-heartbeat auth-hero-icon"></i>
      </div>

      <!-- 右侧表单区域 -->
      <div class="auth-form-container">
        <!-- 选项卡 -->
        <div class="auth-tabs">
          <div class="auth-tab" :class="{active: activeTab === 'login'}" @click="switchTab('login')">登录</div>
          <div class="auth-tab" :class="{active: activeTab === 'register'}" @click="switchTab('register')">注册</div>
        </div>

        <!-- 登录表单 -->
        <form class="auth-form" :class="{active: activeTab === 'login'}" @submit.prevent="handleLogin">
          <div class="form-group">
            <label for="login-username">用户名</label>
            <input type="text" id="login-username" class="form-control" v-model="loginForm.username" required>
          </div>

          <div class="form-group">
            <label for="login-password">密码</label>
            <input type="password" id="login-password" class="form-control" v-model="loginForm.password" required>
          </div>

          <button type="submit" class="btn">登录</button>

          <div class="auth-footer">
            还没有账号？<a href="#" @click.prevent="switchTab('register')">立即注册</a>
          </div>
        </form>

        <!-- 注册表单 -->
        <form class="auth-form" :class="{active: activeTab === 'register'}" @submit.prevent="handleRegister">
          <div class="form-group">
            <label for="register-username">用户名</label>
            <input type="text" id="register-username" class="form-control" v-model="registerForm.username" required>
          </div>

          <div class="form-group">
            <label for="register-email">电子邮箱</label>
            <input type="email" id="register-email" class="form-control" v-model="registerForm.email" required>
          </div>

          <div class="form-group">
            <label for="register-password">密码</label>
            <input type="password" id="register-password" class="form-control" v-model="registerForm.password" required>
          </div>

          <div class="form-group">
            <label for="register-confirm-password">确认密码</label>
            <input type="password" id="register-confirm-password" class="form-control"
              v-model="registerForm.confirmPassword" required>
          </div>

          <button type="submit" class="btn">注册</button>

          <div class="auth-footer">
            已有账号？<a href="#" @click.prevent="switchTab('login')">立即登录</a>
          </div>
        </form>
      </div>
    </div>

    <!-- 注册成功弹窗 -->
    <div class="modal-overlay" :class="{active: showSuccessModal}">
      <div class="modal-content">
        <i class="fas fa-check-circle modal-icon"></i>
        <h3 class="modal-title">注册成功！</h3>
        <p class="modal-text">您的账号已成功创建，请使用您的用户名和密码登录系统</p>
        <button class="modal-btn" @click="redirectToLogin">确定</button>
      </div>
    </div>
  </div>

  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        // 当前激活的选项卡
        const activeTab = ref('login');

        // 登录表单数据
        const loginForm = ref({
          username: '',
          password: ''
        });

        // 注册表单数据
        const registerForm = ref({
          username: '',
          email: '',
          password: '',
          confirmPassword: ''
        });

        // 是否显示成功弹窗
        const showSuccessModal = ref(false);

        // 切换选项卡
        const switchTab = (tab) => {
          activeTab.value = tab;
        };

        // 处理登录
        const handleLogin = () => {
          // 这里应该是实际的登录逻辑
          console.log('登录信息:', loginForm.value);

          // 模拟登录成功，跳转到主界面
          window.location.href = 'index.html'; // 替换为您的主界面URL
        };

        // 处理注册
        const handleRegister = () => {
          // 验证密码是否一致
          if (registerForm.value.password !== registerForm.value.confirmPassword) {
            alert('两次输入的密码不一致！');
            return;
          }

          // 这里应该是实际的注册逻辑
          console.log('注册信息:', registerForm.value);

          // 显示成功弹窗
          showSuccessModal.value = true;
        };

        // 跳转到登录界面
        const redirectToLogin = () => {
          showSuccessModal.value = false;
          activeTab.value = 'login';

          // 清空注册表单
          registerForm.value = {
            username: '',
            email: '',
            password: '',
            confirmPassword: ''
          };
        };

        return {
          activeTab,
          loginForm,
          registerForm,
          showSuccessModal,
          switchTab,
          handleLogin,
          handleRegister,
          redirectToLogin
        };
      }
    }).mount('#auth-app');
  </script>
</body>

</html>